ES Modules
ES Modules
JavaScript のモジュールシステムの1つ
CommonJS との対比でよく登場する
JS モジュール三国志を読む
https://zenn.dev/oukayuka/books/cb48853473000fb7fcde/viewer
もともと JS にモジュールシステム（外部のソースを読み込む仕組み）がなかった
<script src="...">でグローバル空間に展開するしかなかった
Node.js の登場で状況が変わる 🚀
JavaScript の体裁を整えるために CommonJS という標準 API 仕様を定められた
その API のひとつが require
パッケージ管理システム npm で手軽にパッケージを使えるように 🎉
CommonJS 形式
code:cjs
/* cjs/moon.js */
const moon = {
modifier: 'prism',
transform() {
console.log(Moon ${this.modifier} power, make up!);
},
};
module.exports = moon;
npm パッケージが公開されるもそれは Node.js 向けだった
つまりサーバサイドでしか動ない
クライアントサイドでも動かしたくなるのが自然な流れ
CommonJS でモジュールバンドラが使えるようになる 🚀
クライアントサイドのモジュールシステムとしても CommonJS が使える
CommonJS で天下統一された 🎉
ところが CommonJS にも課題が...
クライアントサイドでの読み込みを想定してなかったので、
ネットワークのオーバヘッドが大きいクライアントサイドでは待ち時間が大きくなる
AMD の登場 🚀
ブラウザ環境での遅延読み込みや依存解決をサポート
しかしそこまで広がらず
CJS と AMD が絡み合っていた時期に革命が起きる...
ES Modules の登場 🚀🚀🚀
type="module" で module モードを宣言
Strict mode が自動的に有効化される
ECMAScript 標準なので爆流行る
モジュールバンドラ webpack が詳細を隠蔽する
ES Modules、CommonJS、AMD を含めたさまざまなモジュール構文をサポート
webpack が賢くモジュール構文を検出して依存関係を解決・バンドルしてくれる
ESM がブラウザ環境での直接的な import をサポートするならバンドラは要らない？
No
クライアントサイドでパッケージを個別に読み込むのはオーバヘッドが大きい